<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; max-width: 400px; margin: 50px auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { opacity: 0.8; }
    </style>
</head>
<body>
<h2>用户注册</h2>
<form id="registerForm">
    <div class="form-group">
        <label>用户名：</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div class="form-group">
        <label>密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div class="form-group">
        <label>邮箱：</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label>手机号：</label>
        <input type="tel" id="phone" name="phone" required>
    </div>
    <div class="form-group">
        <label>用户类型：</label>
        <select id="role" name="role" required>
            <option value="customer">客户</option>
            <option value="admin">管理员</option>
        </select>
    </div>
    <button type="submit">注册</button>
</form>

<div id="result"></div>

<script>
    document.getElementById('registerForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const email = document.getElementById('email').value;
        const phone = document.getElementById('phone').value;
        const role = document.getElementById('role').value; // 获取角色选择

        fetch('http://localhost:9100/api/users/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username,
                password,
                email,
                phone,
                role // 新增角色参数
            })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('注册失败：' + response.status);
                }
                return response.json(); // 解析响应体为JSON
            })
            .then(data => { // 新增then回调处理注册成功
                document.getElementById('result').innerHTML =
                    `<p style="color: green;">注册成功！用户ID：${data.id}，角色：${role}</p>`;
                document.getElementById('registerForm').reset(); // 重置表单

                // 1.5秒后跳转登录页
                setTimeout(() => {
                    window.location.href = 'login.html'; // 确保login.html路径正确
                }, 1500);
            })
            .catch(error => {
                document.getElementById('result').innerHTML =
                    `<p style="color: red;">${error.message}</p>`;
            });
    });
</script>
</body>
</html>